<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { Download } from '@element-plus/icons-vue'
import { getWall } from '@/api/wallpaper/wall'

const route = useRoute()
const router = useRouter()

const wallpaper = ref(null)
const loading = ref(true)
const downloadDialogVisible = ref(false)

// 获取壁纸数据
const getWallpaper = async () => {
  try {
    loading.value = true
    const { data } = await getWall(route.params.id)
    wallpaper.value = data
  } catch (error) {
    ElMessage.error('获取壁纸信息失败')
  } finally {
    loading.value = false
  }
}


// 处理下载
const handleDownload = (type) => {
  const url = wallpaper.value.smallPicurl
  const link = document.createElement('a')
  link.href = url

  switch(type) {
    case 'pc':
      link.download = `wallpaper_${wallpaper.value.id}_3840x2160.jpg`
      break
    case 'mobile':
      link.download = `wallpaper_${wallpaper.value.id}_978x2160.jpg`
      break
    case 'original':
      link.download = `wallpaper_${wallpaper.value.id}_original.jpg`
      break
  }

  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  downloadDialogVisible.value = false
}

onMounted(() => {
  getWallpaper()
})
</script>

<template>
  <div class="wallpaper-detail" v-loading="loading">
    <template v-if="wallpaper">
      <el-row :gutter="20">
        <!-- 左侧预览区 -->
        <el-col :span="16">
          <div class="preview-section">
            <el-image
                :src="wallpaper.smallPicurl"
                fit="cover"
                :preview-src-list="[wallpaper.smallPicurl]"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </el-col>

        <!-- 右侧信息区 -->
        <el-col :span="8">
          <div class="info-wrapper">
            <div class="action-bar">
              <el-button
                  type="primary"
                  size="large"
                  class="download-btn"
                  @click="downloadDialogVisible = true"
              >
                <el-icon><Download /></el-icon>
                点击免费下载
              </el-button>
            </div>

            <div class="detail-info">
              <h3 class="info-title">作品信息</h3>
              <el-divider />
              <ul class="info-list">
                <li class="info-item">
                  <span class="label">作品ID：</span>
                  <span class="value">{{ wallpaper.id }}</span>
                </li>
                <li class="info-item">
                  <span class="label">图片尺寸：</span>
                  <span class="value">3840 x 2160</span>
                </li>
                <li class="info-item">
                  <span class="label">作品分类：</span>
                  <span class="value">{{ wallpaper.description }}</span>
                </li>
                <li class="info-item">
                  <span class="label">发布时间：</span>
                  <span class="value">{{ wallpaper.createTime }}</span>
                </li>
                <li class="info-item">
                  <span class="label">发布者：</span>
                  <span class="value">{{ wallpaper.nickname }}</span>
                </li>
                <li class="info-item">
                  <span class="label">评分：</span>
                  <span class="value">
                    <el-rate
                        v-model="wallpaper.score"
                        disabled
                        show-score
                        text-color="#ff9900"
                    />
                  </span>
                </li>
                <li class="info-item" v-if="wallpaper.tabs">
                  <span class="label">作品标签：</span>
                  <div class="tags">
                    <el-tag
                        v-for="tag in wallpaper.tabs.split(',')"
                        :key="tag"
                        class="tag-item"
                        effect="light"
                        round
                    >
                      #{{ tag }}
                    </el-tag>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 下载弹窗 -->
      <el-dialog
        v-model="downloadDialogVisible"
        title="免费壁纸下载"
        width="400px"
      >
        <div class="download-options">
          <el-button @click="handleDownload('pc')">
            下载电脑横屏尺寸 (3840 x 2160)
          </el-button>
          <el-button @click="handleDownload('mobile')">
            下载手机竖屏尺寸 (978 x 2160)
          </el-button>
          <el-button @click="handleDownload('original')">
            下载原图尺寸壁纸
          </el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.wallpaper-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .preview-section {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    text-align: center;

    .el-image {
      max-height: 70vh;
      border-radius: 4px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    }

    .action-bar {
      margin-top: 20px;
    }
  }

  .info-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);

    .action-bar {
      margin-bottom: 24px;

      .download-btn {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 500;

        .el-icon {
          margin-right: 8px;
          font-size: 18px;
        }
      }
    }

    .detail-info {
      .info-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0 0 16px;
      }

      .el-divider {
        margin: 16px 0;
      }

      .info-list {
        list-style: none;
        padding: 0;
        margin: 0;

        .info-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 16px;
          line-height: 1.5;

          .label {
            width: 84px;
            color: #666;
            font-size: 14px;
          }

          .value {
            flex: 1;
            color: #333;
            font-size: 14px;
          }

          .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .tag-item {
              margin: 0;
              font-size: 13px;
              padding: 0 12px;
              height: 28px;
              line-height: 28px;
            }
          }
        }
      }
    }
  }
}

.download-options {
  display: flex;
  flex-direction: column;
  gap: 15px;

  .el-button {
    width: 100%;
  }
}
</style>
